
import moment from 'moment';
import { priorityList } from '@/pages/common/constant.js';
import store from '@/store';
const priorityHandler = (priority) => {
  return priorityList.find(item => +item.value === +priority) ?? {};
};

const airportInfoHandler = (e, code) => {
  store.commit('fraMonitoring/setState', { key: 'airportInfoVisible', payload: true });
  localStorage.setItem('apInfoCode', code);
};
export default {
  name: 'sliderItem',
  functional: true,
  render(h, ctx) {
    const legInfo = ctx.props.currentLegInfo;
    const events = legInfo.events ? legInfo.events : legInfo.event ? [legInfo.event] : [];
    const { inTime, eta, outTime, flightNo, depCode3, arrCode3, dep, arr, etopsFlight } = legInfo;
    // 当前航段event点
    const eventArr = [];
    const eventArrO = [];
    const wArr = [];
    const et = inTime || eta;
    let rangeClass = 'c1';
    if (
      moment.utc(new Date()) >= moment.utc(outTime) &&
      moment.utc(new Date()) <= moment.utc(et) &&
      !etopsFlight
    ) {
      rangeClass = 'cn';
    } else if (moment.utc(outTime) >= moment.utc(new Date())) {
      rangeClass = 'c4';
    }
    // if (isAlternate) {
    //   rangeClass = 'c5';
    // }
    // if (events) {
    //   const eventSort = [...events].sort((a, b) => b.priority - a.priority);

    //   const esClassFlag = eventSort[0]?.priority ?? -1;
    //   if (esClassFlag === -1) {
    //     rangeClass = 'cn';
    //   } else if (esClassFlag === 0) {
    //     rangeClass = 'c0';
    //   } else if (esClassFlag === 1) {
    //     rangeClass = 'c1';
    //   } else if (esClassFlag === 2) {
    //     rangeClass = 'c2';
    //   } else if (esClassFlag === 3) {
    //     rangeClass = 'c3';
    //   }
    // }

    const e = inTime || eta || moment.utc(new Date()).add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');
    const dt = Math.abs(moment.utc(outTime).diff(moment.utc(e), 'minute'));
    const dts = Math.abs(moment.utc(outTime).format('ss') - moment.utc(e).format('ss')) / 60;

    const eventsList = [...(events ?? [])].sort((a, b) => new Date(a.msgTime).getTime() - new Date(b.msgTime).getTime());
    for (let ei = 0; ei < eventsList.length; ei++) {
      const element = eventsList[ei];

      // 剩余秒数转化分钟

      // wArr.push(offstLeft);
      const eItemL = moment.utc(element.msgTime).diff(moment.utc(outTime), 'minute');
      const eItemLs = moment.utc(element.msgTime).format('ss') / 60;
      const eItemDate = (eItemL + eItemLs) / (dts + dt) * 100;
      wArr.push(eItemDate);
    }

    wArr.sort((a, b) => a - b);

    for (let edI = 0; edI < eventsList.length; edI++) {
      const w1 = wArr[edI];
      const w2 = wArr[edI - 1] ?? -1;
      const w3 = wArr[edI + 1] ?? 101;
      let eW = 0;
      let eL = 0;
      let miw = '6px';
      let lrFlag = 'n';
      if (w1 > 0 && w1 < 100 && w2 <= 0) {
        eW = w1;
        eL = 0;
        miw = '1px';
        lrFlag = 'l';
      } else if (w1 > 0 && w1 <= 100 && w2 > 0 && w2 < 100) {
        eW = w1 - w2;
        eL = w2;
        miw = '6px';
      } else if (w1 >= 100 && w2 < 100 && w2 > 0) {
        eW = 100 - w2;
        eL = w2;
        lrFlag = 'r';
      } else if (w1 >= 100 && w2 < 0) {
        eW = 100;
        eL = 0;
        lrFlag = '0';
        miw = '0px';
      } else if (w1 < 0 && w3 >= 100) {
        eW = 100;
        eL = 0;
        lrFlag = '0';
        miw = '1px';
      } else if (eventsList.length === 1 && (w1 >= 100 || w1 <= 0)) {
        eW = 100;
        eL = 0;
        lrFlag = '0';
        miw = '1px';
      }

      if (w1 > 0 && w1 <= 100 && typeof wArr[edI + 1] === 'undefined') {
        eventArr.push(
          <a-dropdown overlayStyle={{ 'z-index': 2050 }}>
            <div slot='overlay' >
              <span class={[`fs-12 leg-event-box  leg-event-box-${rangeClass}`]}>
                <div class='leg-event-box-fn'>{flightNo}</div>
                <a onClick={(e) => airportInfoHandler(e, depCode3 || dep, 'dep')}>{depCode3 || dep}</a>
                <span class='leg-event-box-dot'>·········</span>
                <a onClick={(e) => airportInfoHandler(e, arrCode3 || arr, 'arr')}>{arrCode3 || arr}</a>
              </span>
            </div>
            <span class={[`edt-width-box edt-w-box-r`]} style={{ left: `${w1}%`, width: `calc(${100 - w1}% - 6px)` }}></span>
          </a-dropdown>
        );
      }
      const eMsgTime = eventsList[edI].msgTime;
      const onajiData = [];
      const eItem = eventsList[edI];
      let cp = eItem.priority;
      for (const eMsgTimeItem of eventsList) {
        if (eMsgTimeItem.msgTime === eMsgTime) {
          cp = Math.max(cp, eMsgTimeItem.priority);
          onajiData.push(<div><span class='mr-12'>{eMsgTimeItem.name}</span><span class='mr-12'>{eMsgTimeItem.code}</span>{eMsgTimeItem.description}</div>);
        }
      }

      const priority = priorityHandler(cp);
      const pieceW = eW / 100 * 186;
      if (eW > 0 && (pieceW > 6 || eL === 0)) {
        eventArr.push(
          <a-dropdown overlayStyle={{ 'z-index': 2050 }}>
            <div slot='overlay' >
              <span class={[`fs-12 leg-event-box  leg-event-box-${rangeClass}`]}>
                <div class='leg-event-box-fn'>{flightNo}</div>
                <a onClick={(e) => airportInfoHandler(e, depCode3 || dep, 'dep')}>{depCode3 || dep}</a>
                <span class='leg-event-box-dot'>·········</span>
                <a onClick={(e) => airportInfoHandler(e, arrCode3 || arr, 'arr')}>{arrCode3 || arr}</a>
              </span>
            </div>
            <span class={[`edt-width-box edt-w-box-${lrFlag}`]} style={{ left: `${eL}%`, width: `calc(${eW}% - ${miw})` }}></span>
          </a-dropdown>
        );
      }
      if (eItem.name === 'FDE') {
        if (eItem.msgType === 'EFFDE') {
          eventArrO.push(
            <a-dropdown overlayStyle={{ 'z-index': 2050 }}>
              <div slot='overlay' >
                <span class='fs-12 dot-event-box' style={{ 'border-color': priority.color }}>
                  {onajiData}
                </span>
              </div>
              <span
                class={['c-event-dot', 'c-event-dot-out', `c-event-in-${priority.value}`]}
                style={{ 'left': `${w1}%` }}
              ></span>
            </a-dropdown>

          );
        } else {
          eventArr.push(
            <a-dropdown overlayStyle={{ 'z-index': 2050 }}>
              <div slot='overlay' >
                <span class='fs-12 dot-event-box' style={{ 'border-color': priority.color }}>
                  {onajiData}
                </span>
              </div>
              <span
                class={['c-event-dot', 'c-event-dot-in', `c-event-in-${priority.value}`]}
                style={{ 'left': `${w1}%` }}
              ></span>
            </a-dropdown>

          );
        }
      } else {
        eventArr.splice(0, 9999);
      }
    }
    if (eventsList.length === 0) {
      eventArr.push(
        <a-dropdown overlayStyle={{ 'z-index': 2050 }}>
          <div slot='overlay' >
            <span class={[`fs-12 leg-event-box  leg-event-box-${rangeClass}`]}>
              <div class='leg-event-box-fn'>{flightNo}</div>
              <a onClick={(e) => airportInfoHandler(e, depCode3 || dep, 'dep')}>{depCode3 || dep}</a>
              <span class='leg-event-box-dot'>·········</span>
              <a onClick={(e) => airportInfoHandler(e, arrCode3 || arr, 'arr')}>{arrCode3 || arr}</a>
            </span>
          </div>
          <span class={[`edt-width-box edt-w-box-0`]} style={{ left: '0%', width: '100%' }}></span>
        </a-dropdown>
      );
    }
    return [
      <span class={['jdt-slider', `leg-silider-${rangeClass}`]} style={{ 'left': 0, 'width': `100%`, 'position': 'absolute' }}>
        <span class={['jdt-oh', eventArr.length === 0 ? 'edt-width-box' : '']}>
          {eventArr}
        </span>
        {eventArrO}
      </span>
    ];
  }

};

//       // 判断该航段是否包含当前时间而亮起
//       let rangeClass = '';
//       if (
//         new Date() >= new Date(flightLeg.outTime) &&
//         new Date() <= new Date(et) &&
//         !flightLeg.etopsFlight
//       ) {
//         rangeClass = 'in-time';
//       } else if (flightLeg.etopsFlight) {
//         rangeClass = 'or-time';
//       }

//       // 当前航段event点
//       const eventArr = [];
//       const eventArrO = [];

//       const wArr = [];
//       for (let ei = 0; ei < events.length; ei++) {
//         const element = events[ei];
//         const eItemL = moment.utc(element.msgTime).diff(moment.utc(flightLeg.outTime), 'minute');
//         const eItemL = moment.utc(element.msgTime).diff(moment.utc(flightLeg.outTime), 'minute');
//         const eItemDate = eItemL / ((e + es) - (s + ss)) * 100;
//         wArr.push(eItemDate);
//       }
//       wArr.sort((a, b) => a - b);

